<template>
  <div class="flex items-center justify-center h-screen">
    <div class="flex flex-col items-center">
      <img class="w-20 h-20" src="/public/logo.png" alt="logo">
      <h1 class="text-3xl mb-4"></h1>
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full" type="primary" @click="loginFun">登录</el-button>
          <div class="flex w-full justify-end">
            <span class="cursor-pointer text-blue-500" @click="toRegister">前往注册</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import router from "../../router";
import {login} from '@/api/user.js'
import {useUserStore} from '@/pinia/index.js'
const userStore = useUserStore()

const form = ref({
  username: '',
  password: ''
})
const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 5, max: 10, message: '长度在6到10个字符', trigger: 'blur'}
  ],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
}
const ruleFormRef = ref(null)
const loginFun = async () => {
  ruleFormRef.value.validate(async valid => {
    if (valid) {
      const res = await userStore.loginIn(form.value)
    } else {
      return false
    }
  })
}
const toRegister = () => {
  router.push('register')
}

</script>

<style scoped lang="scss">

</style>
